import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import "../styles/myCollection/CollectionList.scss"


class MyCollection extends Component {
    constructor() {
        super()
        this.state = {
            collectionlist: [
                { pic: "https://pic.cdfgsanya.com/assets/upload/product/bdf7eeea644288e9def361c537037ce2_400x400.jpg", name: "澳尔滨爽肤精萃液 330ml 3瓶套装", price: 100 },
                { pic: "https://pic.cdfgsanya.com/assets/upload/product/bdf7eeea644288e9def361c537037ce2_400x400.jpg", name: "澳尔滨爽肤精萃液 330ml 3瓶套装", price: 100 },
                { pic: "https://pic.cdfgsanya.com/assets/upload/product/bdf7eeea644288e9def361c537037ce2_400x400.jpg", name: "澳尔滨爽肤精萃液 330ml 3瓶套装", price: 100 }
            ]
        }
    }


    mycollectionback() {
        this.props.history.goBack()
    }
    render() {
        return (
            <div className='mycollection'>
                <NavBar onBack={() => { this.mycollectionback() }}>
                    我的收藏
                </NavBar>

                <div className='collectionlist'>
                    {
                        this.state.collectionlist.map((item,index) => {
                            return (
                                <div className='list' key={index}>
                                    <img src={item.pic} alt="" />
                                    <div className='text'>
                                        <div className='name'>{item.name}</div>
                                        <div className='price-X'>
                                            <p className='price'>活动价¥<span>{item.price}</span></p>
                                            <p className='X'>取消收藏</p>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default MyCollection;